<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 目标使用svg精灵图 -->
  <!-- 1.制作svg精灵图 [痛点]-->
  <!-- 2.使用svg精灵图 [痛点]-->

  <!-- 1.制作 把所有的svg精灵图都包裹到一个svg标签中,还得把原来的svg标签改成symbol -->
  <svg style="display:none">
    <symbol id="one" t="1673404435705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2680" width="32" height="32"><path d="M929.70745 487.72513 167.942967 487.72513l358.793666-318.918493c12.390191-11.012821 13.505595-29.982872 2.493797-42.37204-11.010775-12.388145-29.979802-13.506619-42.369993-2.492774L74.839499 490.168786c-6.407943 5.695722-10.073426 13.859659-10.073426 22.432918 0 8.573259 3.665483 16.737196 10.073426 22.432918l412.019914 366.227985c5.717212 5.082762 12.83533 7.581676 19.926842 7.581676 8.275477-0.002047 16.515139-3.403516 22.443152-10.07445 11.012821-12.389168 9.897418-31.359218-2.493797-42.37204L179.893136 548.100196l749.814314 0c16.575514 0 30.013571-13.612019 30.013571-30.187533S946.283987 487.72513 929.70745 487.72513z" fill="#303035" p-id="2681"></path></symbol>
    <symbol id="two" t="1672369959592" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5070" width="32" height="32"><path d="M912.832 467.104h-22.272l-6.624-22.464h60.928a32 32 0 1 0 0-64h-79.808l-35.584-120.544C815.168 221.28 771.52 192 728 192H302.592c-43.52 0-87.136 29.28-102.112 70.112l-34.944 118.528H96a32 32 0 0 0 0 64h50.624l-6.624 22.464H128c-35.296 0-64 28.704-64 64v282.944h51.104v34.816a32 32 0 1 0 64 0v-34.816h690.528v34.816a32 32 0 1 0 64 0v-34.816h43.232v-282.944a64.128 64.128 0 0 0-64.032-64zM128 750.016v-104.96h73.792c26.464 0 50.528-16.672 59.872-41.408l24.064-63.712c1.088-2.912 1.216-5.888 1.44-8.832h450.528c0.224 2.944 0.352 5.92 1.44 8.832l24.064 63.648a64.256 64.256 0 0 0 59.872 41.472h89.76v104.96H128z m784.832-168.96l-89.76-0.032-18.848-49.952h108.608v49.984zM218.528 426.944a30.944 30.944 0 0 0 2.816-9.568L261.184 282.24c4.48-12.16 23.52-26.24 41.408-26.24H728c17.888 0 36.928 14.08 40.736 24.192l55.104 186.88H206.72l11.808-40.128z m2.144 104.16l-18.88 49.984H128v-49.984h92.672z" p-id="5071" fill="#000000"></path><path d="M614.752 626.24h-188.64a32 32 0 1 0 0 64h188.64a32 32 0 1 0 0-64z" p-id="5072" fill="#000000"></path></symbol>
    <symbol id="three" t="1675305094641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4243" width="32" height="32"><path d="M204.8 204.8m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#EBF2FC" p-id="4244"></path><path d="M819.2 204.8m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#B5D2F3" p-id="4245"></path><path d="M819.2 819.2m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#7FB0EA" p-id="4246"></path><path d="M204.8 819.2m-204.8 0a204.8 204.8 0 1 0 409.6 0 204.8 204.8 0 1 0-409.6 0Z" fill="#4A90E2" p-id="4247"></path></symbol>
  </svg>

  <!-- 2.使用svg精灵图 -->
  <svg>
    <use xlink:href="#one"></use>
  </svg>
  <svg>
    <use xlink:href="#two"></use>
  </svg>
  <svg>
    <use xlink:href="#three"></use>
  </svg>
</body>
</html>